<template>
  <div style="margintop: 12px">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="title"
          name="title"
          label="标题"
          placeholder="标题"
          :rules="[{ required: true, message: '请填写标题' }]"
        />
        <van-field
          v-model="desc"
          type="textarea"
          name="desc"
          label="描述"
          rows="2"
          placeholder="描述"
          :rules="[{ required: true, message: '请填写描述' }]"
        />
        <van-field
          disabled
          v-model="pic_url"
          type="textarea"
          rows="2"
          name="pic_url"
          label="图片"
          placeholder="图片"
          :rules="[{ required: true, message: '请填写图片地址' }]"
        />
        <van-field
          v-model="detail"
          name="detail"
          label="文章内容"
          rows="8"
          type="textarea"
          maxlength="2000"
          show-word-limit
          placeholder="文章内容"
          :rules="[{ required: true, message: '请填写文章内容' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>


<script setup>
import { ref } from "vue";
import { addCommentApi } from "@/api/comment";
import { useRouter } from "vue-router";
let router = useRouter();

const title = ref("");
const desc = ref("");
const pic_url = ref(
  "https://img2.woyaogexing.com/2023/02/06/6608ee2b503bf94445c5fc2d19a36e44.jpg"
);

const detail = ref("");

// fromData 是组件收集到的表单数据
let onSubmit = async (fromData) => {
  await addCommentApi(fromData);

  // 新增成功
  // 跳转回种草列表
  router.replace("/recommend");
};
</script>